<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        假日管理&#X3000;
                        <el-button type="primary" size="small" @click="addHoliday()">新增假日</el-button>
                    </div>
                    <div class="leave_right choose_right_input">
                        <div>
                            <el-input type="text" placeholder="请输入年份" v-model="form.chooseModel" clearable @clear="chooseRecord()"></el-input><el-button type="primary" size="small" @click="chooseRecord()">搜索</el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="holidayOrWorkdayType" label="类型"> </el-table-column>
            <el-table-column prop="startTime" label="开始时间"> </el-table-column>
            <el-table-column prop="endTime" label="结束时间"> </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="removeHoliday(scope.row)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button type="text" size="small" @click="updateHoliday(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogInput ref="addHolidayDialog" :title="dialigTile">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="120px" size="small">
                    <el-form-item label="时间：">
                        <el-col :span="24" style="text-align: left;">
                            <el-date-picker
                                    v-model="form.time_interval"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    size="small"
                                    format="yyyy-MM-dd"
                                    :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="假期类型：">
                        <el-col :span="24" style="text-align: left;">
                            <el-radio v-model="form.holidayOrWorkday" label="0">工作日</el-radio>
                            <el-radio v-model="form.holidayOrWorkday" label="1">假日</el-radio>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-col :span="24">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    v-model="form.description"
                                    placeholder="请输入角色描述">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddHoliday()">确定</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    import moment from 'moment';
    @Component({
        extends: Pagination,
        components: {
            DialogInput
        }
    })
    export default class HolidayManage extends Vue {
        form = {
            startTime: '',
            endTime: '',
            time_interval: [],
            holidayOrWorkday: '',
            description: '',
            chooseModel: ''
        }
        dialigTile: string = '';
        isAdd: boolean = true;
        tableData = []
        async getAllHoliday () {
            let parameter = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                year: this.form.chooseModel,
                orderByName: 'start_time',
                orderBySort: 'desc'
            }
            let res = await this.$http.post('holiday/list', parameter)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.tableData.forEach((i) => {
                    i.startTime = moment(i.startTime).format('YYYY-MM-DD')
                    i.endTime = moment(i.endTime).format('YYYY-MM-DD')
                    if (i.holidayOrWorkday == 0) {
                        i.holidayOrWorkdayType = '工作日'
                    } else {
                        i.holidayOrWorkdayType = '假日'
                    }
                })
                this.pagination.total = totalNum;
            }
        }
        chooseRecord () {
            this.getAllHoliday();
        }
        addHoliday () {
            this.dialigTile = '新增假日';
            this.isAdd = true;
            this.$refs['addHolidayDialog'].openDialog();
        }
        updateHoliday (data) {
            this.dialigTile = '修改假日';
            this.isAdd = false;
            this.form.time_interval = [data.startTime, data.endTime]
            this.form.holidayOrWorkday = String(data.holidayOrWorkday);
            this.form.description = data.description;
            this.form.id = data.id;
            this.$refs['addHolidayDialog'].openDialog();
        }
        removeHoliday (data) {
            this.$confirm('此操作将删除'+ data.description +'，是否继续?','提醒',{
                confirmButtonText: '是',
                cancelButtonText: '否',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmDeleteHoliday(data.id);
            }).catch((err) => {
                console.log(err)
            })
        }
        async confirmAddHoliday () {
            if (this.form.time_interval.length < 2) {
                this.$alert('请选择正确的时间！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.holidayOrWorkday == '') {
                this.$alert('请选择假日类型！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.time_interval.length > 0) {
                this.form.startTime = moment(this.form.time_interval[0], 'YYYY-MM-DD HH:mm:ss').valueOf();
                this.form.endTime = moment(this.form.time_interval[1], 'YYYY-MM-DD HH:mm:ss').valueOf();
            }
            if (this.isAdd) {
                let parameter = {
                    holidayOrWorkday: this.form.holidayOrWorkday,
                    startTime: this.form.startTime,
                    endTime: this.form.endTime,
                    description: this.form.description
                }
                let res = await this.$http.post('holiday/add', parameter)
                if (res.status == 200) {
                    this.$refs['addHolidayDialog'].closeDialog();
                    this.getAllHoliday();
                }
            } else {
                let parameter = {
                    startTime: this.form.startTime,
                    endTime: this.form.endTime,
                    description: this.form.description
                }
                let res = await this.$http.put(`holiday/${this.form.id}`, parameter)
                if (res.status == 200) {
                    this.$refs['addHolidayDialog'].closeDialog();
                    this.getAllHoliday();
                }
            }
        }
        async confirmDeleteHoliday (id: string|number) {
            let res = await this.$http.delete(`holiday/${id}`)
            if (res.status == 200) {
                this.getAllHoliday();
            }
        }
        closeDialog () {
            this.$refs['addHolidayDialog'].closeDialog();
        }
        loadDataForPagination () {
            this.getAllHoliday();
        }
        mounted () {
            this.getAllHoliday();
        }
    }
</script>

<style scoped>

</style>
<style lang="scss">
    .choose_int {
        .el-input {
            width: 20%;
        }
        .el-input__inner {
            height: 34px;
            line-height: 34px;
        }
    }
</style>